<template>
  <div>
    <v-chart class="chart" ref="chart" :option="option" autoresize />
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { GaugeChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'

use([CanvasRenderer, GaugeChart, TitleComponent, TooltipComponent, LegendComponent])

export default {
  name: 'bloodRelation',
  components: {
    VChart
  },
  props: {
    chartName: {
      type: String,
      defalut: '峰值'
    },
    detail: {
      type: Object,
      defalut: () => ({
        formatter: '{value}'
      })
    },
    chartData: {
      type: Array,
      defalut: () => [{ value: 50, name: '完成率' }]
    }
  },
  data() {
    return {}
  },
  computed: {
    option() {
      return {
        tooltip: {
          formatter: '{b} : {c}K'
        },
        series: [
          {
            name: this.chartName,
            type: 'gauge',
            detail: {formatter: '{value}K'},
            // data: [{ value: 50, name: '完成率' }]
            data: this.chartData
          }
        ]
      }
    }
  },

  methods: {
    _ecExport(title = '') {
      ecExport(this.$refs.chart, title)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
  width: 100%;
  .chart {
    height: 100%;
    width: 100%;
  }
}
</style>